<template>
	<div class="grid__wrapper my-2">
		<div
			class="grid__item"
			:class="item.isClick ? 'cursor-pointer' : ' cursor-default'"
			v-for="(item, index) in items"
			:key="item.name"
			@click="handleClick(item)"
		>
			<div class="w-[63px] h-[63px]">
				<img :src="item.icon || iconArr[index]" />
			</div>
			<div class="flex flex-col">
				<span
					class="text-[33px] font-bold"
					:class="item.isClick ? 'text-[#2898ff]' : 'text-[#333] '"
				>
					{{ item.count || 0 }}
				</span>
				<span class="text-lg text-[#666]">{{ item.name }}</span>
			</div>
		</div>
		<slot name="right"></slot>
	</div>
</template>

<script setup lang="ts">
import icon1 from '/@/assets/project/1.png';
import icon2 from '/@/assets/project/2.png';
import icon3 from '/@/assets/project/3.png';
import icon4 from '/@/assets/project/4.png';
import icon5 from '/@/assets/project/5.png';
let iconArr = [icon1, icon2, icon3, icon4, icon5];
import { useMessage } from '/@/hooks/message';

const emits = defineEmits(['click']);
defineProps({
	items: {
		type: Array as PropType<StatItem[]>,
		default: () => [{ icon: '', count: 0, name: '' }],
	},
});
function handleClick(item: StatItem) {
	if (item.isClick) {
		if (item.count == 0) {
			useMessage().error('暂无数据');
			return;
		}
		emits('click', item.type ? item.type : item);
	}
}
</script>

<style lang="scss" scoped>
.grid__wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	// display: grid;
	// grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 12px;
	.grid__item {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 0 12px;
		height: 140px;
		background-color: #fff;
		border-radius: 10px;
		padding: 36px;
		padding-right: 16px;
	}
}
</style>
